<include file="admin/public/head"/>

<div id="table" style="padding: 20px;">
    <el-table
            :data="tableData"
            border
            :row-class-name="tableRowClassName"
            style="width: 100%">
        <volist name="$[table_config]" id="item">
            <if condition="isset($item['type'])">
                <if condition="$item['type'] == 'toolbar'">
                    <el-table-column
                    <if condition="isset($item['fixed'])">
                        fixed="{$item.fixed}"
                    </if>
                    label="{$item.content}"
                    <if condition="isset($item['width'])">
                        width="{$item.width}"
                    </if>
                    >
                    <template slot-scope="scope">
                        <volist name="$item['buttons']" id="btn">
                            <if condition="isset($btn['link']) and $btn['link']">
                                <el-link href="{$btn['url']}" target="_blank">{$btn['content']}</el-link>
                                <else/>
                                <el-button
                                <if condition="$btn['callable']">
                                    @click="{$btn.callable}(scope,{$btn.params})"
                                </if>
                                <if condition="isset($btn['type'])">
                                    type="{$btn['type']}"
                                    <else/>
                                    type="text"
                                </if>
                                size="mini">
                                {$btn.content}
                                </el-button>
                            </if>
                        </volist>
                    </template>
                    </el-table-column>
                </if>
                <if condition="$item['type'] == 'image'">
                    <el-table-column
                    <if condition="isset($item['fixed'])">
                        fixed="{$item.fixed}"
                    </if>
                    <if condition="isset($item['width'])">
                        width="{$item.width}"
                    </if>
                    label="{$item.content}"
                    prop="{$item.field}"
                    >
                    <template slot-scope="scope">
                        <el-avatar shape="square" :size="50" :src="scope.row['{$item.field}']"></el-avatar>
                    </template>
                    </el-table-column>
                </if>

                <else/>
                <el-table-column
                        prop="{$item.field}"
                        label="{$item.content}"
                <if condition="isset($item['fixed'])">
                    fixed="{$item.fixed}"
                </if>
                <if condition="isset($item['width'])">
                    width="{$item.width}"
                </if>
                <if condition="isset($item['align'])">
                    align="{$item.align}"
                </if>
                >
                </el-table-column>
            </if>
        </volist>
    </el-table>

    <div style="margin-top: 10px;text-align: right">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current_page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="page.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.count">
        </el-pagination>
    </div>

    <el-drawer
            :title="drawer_config.title"
            :size="drawer_config.size"
            :visible.sync="drawer">
    </el-drawer>
</div>
<include file="admin/public/foot"/>
<script>
    new Vue({
        el: '#table',
        data: function () {
            return {
                url: '[url]',
                tableData: [],
                drawer: false,
                drawer_config: {
                    title: "",
                    size: "60%",
                },
                page: {
                    current_page: 1,
                    page_size: 8,
                    count: 0
                }
            }
        },
        mounted() {
            this.getDate();
        },
        methods: {
            getDate() {
                let self = this;
                let data = {
                    page: this.page.current_page,
                    page_size: this.page.page_size
                };
                axios.post(this.url, data).then(res => {
                    console.log(res)
                    self.tableData = res.data.list;
                    self.page.count = res.data.count;
                    // self.page.current_page = res.data.current;
                    self.page.page_size = parseInt(res.data.page_size);
                })
            },
            handleSizeChange(val) {
                this.page.page_size = val;
                this.getDate();
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.page.current_page = val;
                this.getDate();
                // console.log(`当前页: ${val}`);
            },
            tableRowClassName({row, rowIndex}, params) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            showDrawer({row, rowIndex}, params) {
                this.drawer = true;
                if (params.hasOwnProperty("config")) {
                    for (let key in params.config) {
                        this.drawer_config[key] = params.config[key];
                    }
                }
                this.url = params.url;
            },
            showEdit() {
                this.$prompt('请输入邮箱', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputErrorMessage: '邮箱格式不正确'
                }).then(({value}) => {
                    this.$message({
                        type: 'success',
                        message: '你的邮箱是: ' + value
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            showConfirm({row, rowIndex}, params) {
                let self = this;
                console.log("params", params)
                this.$confirm(params.title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then((confirm) => {
                    if (confirm === "confirm") {
                        console.log("row", row)
                        let url = params.url;
                        axios.post(url, {id: row.id}).then(res => {
                            let type = "info";
                            let message = "已取消删除";
                            console.log(url, res)
                            if (res.data.code === 1) {
                                type = "success";
                                message = res.data.msg;
                            }
                            self.$message({
                                type: type,
                                message: message,
                                duration: 1000,
                                onClose: function () {
                                    self.getDate();
                                }
                            });
                        })
                    }
                }).catch(() => {
                    // self.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });
            },
            showDialog: function ({row, rowIndex}, params) {
                let self = this;
                layui.use(['layer'], function () {
                    self.layer = layui.layer;
                    self.layer.open({
                        type: 2,
                        maxmin: true,
                        title: params.title,
                        offset: ["center"],
                        area: ['800px', 'calc(80% - 60px)'],
                        content: params.url + "?id=" + row.id,
                        cancel: function () {
                            window.location.reload();
                        }
                    });
                })
            }
        }
    })
</script>
